<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
//    绘制一个三角形
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);

//    起点和lineTo的结束点无法完全闭合缺角
//    使用canvas的自动闭合
//    关闭路径即可
    ctx.closePath();
    ctx.lineWidth = 10;
//    描边
    ctx.stroke();
//    填充 还有一种API也是填充颜色：ctx.fillstyle = '颜色';
    ctx.fill();

//    非零环绕规则(镂空填充)

//    1.看一块区域是否填充
//    2.从这个区域拉一条直线
//    3.看和这条直线相交的轨迹
//    4.如果顺时针轨迹 +1
//    5.如果逆时针轨迹 -1
//    6.所有的轨迹的值计算出来
//    7.如果是非0那么填充
//    8.如果是0那么不填充

//    画笔的状态
//    lineWidth 线宽
//    lineCap线末端类型：（butt默认、round、square
//    lineJoin相交线的拐点 miter（默认）、round、bevel
//    strokeStyle线的颜色
//    fillStyle填充颜色
//    setLineDash([实线长度,虚线长度]) 设置虚线
//    getLineDash() 获取虚线宽度集合
//    lineDashOffset 设置虚线偏移量（负值向右偏移）

//    itar 是for循环的快捷方式

//    线是由点构成的





































</script>


</body>
</html>